<!--
  ~ Copyright (c) 2020 the original author or authors
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      https://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  ~ or implied. See the License for the specific language governing
  ~ permissions and limitations under the License.
  -->
<div class="face-displaying">
  <div class="face-displaying--wrapper">
    <div class="spinner" *ngIf="!isLoaded">
      <app-spinner></app-spinner>
    </div>

    <canvas class="canvas-picture" #canvasPicture></canvas>
    <canvas class="canvas-landmarks" #canvasLandmarks [style.visibility]="disableLandmarks ? 'inherit' : 'hidden'"></canvas>

    <ng-container *ngIf="printData as faces">
      <ng-container *ngFor="let face of faces">
        <div class="face-box" appFrameTooltip [dataFrames]="face.box" [framesQuantity]="faces.length">
          <div class="face-box--face" #boxFace></div>

          <div class="face-box--info" #boxInfo>
            <ng-container *ngIf="type === types.Recognition">
              <ng-container *ngIf="face.subjects[0] as value; else unknown">
                <div class="face-box--info_name">{{ value.subject }}</div>
                <div class="face-box--info_similarity">Similarity: {{ value.similarity | number: '1.0-2' }}</div>
              </ng-container>

              <ng-template #unknown>
                <div class="face-box--info_name">Unknown</div>
              </ng-template>
            </ng-container>

            <ng-container *ngIf="type === types.Detection">
              <div class="face-box--info_similarity">Probability: {{ face.box.probability | number: '1.0-2' }}</div>
            </ng-container>

            <ng-container *ngIf="type === types.Verification">
              <div class="face-box--info_similarity">Similarity: {{ face.similarity | number: '1.0-2' }}</div>
            </ng-container>

            <div class="face-box--info_gender">{{ face.gender.value | titlecase }}, Age: {{ face.age.low + '-' + face.age.high }}</div>
          </div>
        </div>
      </ng-container>
    </ng-container>
  </div>
</div>
